<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let pro1 = new Promise(function (resolve, reject) {
            //执行器函数
            setTimeout(() => {
                resolve(1000)
            }, 1000)
        })
        let pro2 = new Promise(function (resolve, reject) {
            //执行器函数
            setTimeout(() => {
                resolve(2000)
            }, 2000)
        })
        let pro3 = new Promise(function (resolve, reject) {
            //执行器函数
            setTimeout(() => {
                resolve(3000)
            }, 3000)
        })
        /*Promise.all：
        参数为多个promise对象，只有这三个promise状态都变成fulfilled，才会进入then
        ，并且将返回值封装成一个数组传入；这样就可以实现loading加载效果只有在多个任务执行完才消失。
        */
        Promise.all([pro1, pro2, pro3]).then(res => {
            console.log(res) //[1000, 2000, 3000]
        }).catch(err => {
            console.log(err)
        })
        /*Promise.race：
        参数为多个promise对象，这三个promise谁最先变更状态，谁就进入then，并把数据传入；
        这样可以实现请求多个服务器资源，谁最快就请求那个服务器，还有如果请求超时了，可以在指定时间内进入catch，不占用资源
        */
        Promise.race([pro1, pro2, pro3]).then(res => {
            console.log(res) //1000
        }).catch(err => {
            console.log(err)
        })
    </script>
</body>

</html>